<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
    <!--引入Vue-->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
</body>

<script type="text/javascript">
    let number = 18
    let person = {
        name:'张三',
        gender:'男',
    }
    //Object.defineProperty这个方法可以用来修改添加一个对象的属性，当控制台打印出对象的值是(...)时，其实是调用了get方法来获取值的
    Object.defineProperty(person,'age',{ //不参与枚举,需要指定enumerable属性
        // value:19,
        // enumerable:true, //属性可以被枚举,遍历
        // writable:true, //属性可以被修改
        // configurable:true, //属性可以被删除

        //当读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
        get () {
            console.log('getter被调用')
            return number
        },
        //当修改person的age属性时,(setter)就会被调用,且会收到修改的具体值
        set (value) {
            console.log('setter被调用:'+value)
            number = value
        }
    })

    console.log(person)
</script>
</html>
